﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://wubiyu.cnblogs.com">
<head>
      <title></title>
      <link href="../../Theme/DomExtGray/gray.min.css" rel="Stylesheet" type="text/css" />
      <link href="PageModel.css" rel="Stylesheet" type="text/css" />
      <script type="text/javascript" src="../../domExt.js"></script>
      <script type="text/javascript" src="../data.min.js"></script>
      <style type="text/css">

 p.MsoNormal
	{margin-bottom:.0001pt;
	text-align:justify;
	text-justify:inter-ideograph;
	font-size:10.5pt;
	font-family:"Calibri","sans-serif";
	              margin-left: 0cm;
                  margin-right: 0cm;
                  margin-top: 0cm;
            }
      </style>
</head>
<body>
      <div class="fun_title">
             &lt;h:treeview&gt;&lt;/h:treeview&gt;树控件标记
      </div>
      <div class="fun_content">
            描述：些树控件支持ajax加载。使用方法参见示例。<br />
      </div>
      <div class="fun_title2">
            属性:
      </div>
      <div class="fun_content2">
           key：数据中的唯一标识属性模板。<br />
           text：显示在树中每一项的文本标签属性模板。<br />
           value：点击或选择时的获取到的值的属性模板<br />
           parentid：上一层唯一标识属性模板 <br />
           path：当前项的路径属性模板，格式如|-1|2|3|<br />
           icoImg：图标内容模板<br />
           isshowico：是否显示图标，默认为 true<br />
           isajax：是否使用ajax加载,如果为 "true" 则必需设置OnExpandHandle 属性已获取异步数据。<br />
           expandlayer：展开层数 默认："10000"<br />
           ismultiselect：是否可以多选 默认："false"<br />
           OnExpandHandle=function(){ 上一层唯一标识 ，完成函数， listview，content }：展开一个子项是触发的事件句柄。<br />
           OnItemClickHandle=function(value)：单击子项是触发的事件句柄。<br />
           OnItemMouseUpHandle=function()：当用户在鼠标位于子项之上时释放鼠标按钮时触发。<br />
           Data：数组数据源，存储TreeViewData里Key字段，是一个数组<br />
           TreeViewData 树结构数据源 TreeViewData.next 下组数据。每个子项都有 Selected，index [在Data数据源中的索引]
      </div>
        <div class="fun_title2">
            对象方法:
      </div>
       <div class="fun_content2">
          <span> SetData(datas)</span> ：设置数据源。<br />
           <span>Expand(CompletedHandler)</span> ：展开树,CompletedHandler=function(sender){}:树展开完成回调函数<br />
           <span>Selected(key)</span> ：根据唯一标识选择一子项。<br />
           <span>Selecteds(key)</span> ：根据唯一标识选择本级和下级子项<br />
            <span>UnSelecteds(key)</span> ：根据唯一标识取消选择本级和下级子项<br />
           <span>UnSelected(value)</span> ：根据唯一标识取消选择一子项。<br />
           <span>SelectedAll()</span> ：选择所有子项。<br />
           <span>UnSelectedAll()</span> ：取消选择所有子项。<br />
           <span>GetSelectedObjs(callback)</span> ：取消选择所有子项。callback=function(treeviewItemData){}; 已选择子项回调函数，<br />
            &nbsp;&nbsp;&nbsp;&nbsp;return 下面类型的对象数组<br />
             &nbsp;&nbsp;&nbsp;&nbsp;{Selected:否是被选择,Index：索引值,ParentKey：父级Key,Key：自已的Key,next：下级对象数组,....数据源的数据结构) }<br />
      </div>
      <div class="fun_title2">
            静态方法:
      </div>
       <div class="fun_content2">
         
         
      </div>
      <div id="msg" class="fun_title2">
            示例预览:<h:btn id="GetTreeviewSelectBtn">获取选择项</h:btn>
      </div>
      <div class="code">
<h:treeview id="listTree" key="{=[0]}" text="{=[1]}" value="{=[4]}" parentid="{=[2]}" path="{=[3]}" expandlayer="1" ismultiselect="true">
</h:treeview>
<script type="text/javascript">
    _h.ready(function () {
        // _h.LoadJS("../data.min.js", false, true); 

        var listTree = _g("#listTree");
        var fram_content = _g("#fram_content");
        listTree.OnItemClickHandle = function (v) {
            //alert(v);
        };
        listTree.SetData(treeview_data);
        listTree.Expand();
        _h.addEvent(_g("#GetTreeviewSelectBtn"), "click", function () {
             listTree.GetSelectedObjs(function (data) {
                alert(data[1]);
            });

        });
    });
</script>
        </div>
         <br />
       <div class="fun_title2">
            示例代码:
      </div>
       <div class="code">
             Html code

             <p align="left" class="MsoNormal">
                   <span lang="EN-US" style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;color:blue;mso-font-kerning:
0pt">&lt;</span><span lang="EN-US" style="font-size:9.5pt;font-family:&quot;Microsoft YaHei&quot;;
mso-bidi-font-family:&quot;Microsoft YaHei&quot;;color:maroon;mso-font-kerning:0pt">h</span><span 
                         lang="EN-US" style="font-size:9.5pt;font-family:&quot;Microsoft YaHei&quot;;mso-bidi-font-family:
&quot;Microsoft YaHei&quot;;color:blue;mso-font-kerning:0pt">:</span><span lang="EN-US" style="font-size:9.5pt;font-family:&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;
color:maroon;mso-font-kerning:0pt">treeview</span><span lang="EN-US" style="font-size:9.5pt;font-family:&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;
mso-font-kerning:0pt"> <span style="color:red">id</span><span style="color:
blue">=&quot;listTree&quot;</span> <span style="color:red">key</span><span style="color:blue">=&quot;{=[0]}&quot;</span>
                   <span style="color:red">text</span><span style="color:blue">=&quot;{=[1]}&quot;</span>
                   <span style="color:red">value</span><span style="color:blue">=&quot;{=[4]}&quot;</span>
                   <span style="color:red">parentid</span><span style="color:blue">=&quot;{=[2]}&quot;</span>
                   <span style="color:red">path</span><span style="color:blue">=&quot;{=[3]}&quot;</span>
                   <span style="color:red">expandlayer</span><span style="color:blue">=&quot;1&quot;&gt;</span><o:p></o:p></span></p>
             <p align="left" class="MsoNormal">
                   <span lang="EN-US" style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;color:blue;mso-font-kerning:
0pt">&lt;/</span><span lang="EN-US" style="font-size:9.5pt;font-family:&quot;Microsoft YaHei&quot;;
mso-bidi-font-family:&quot;Microsoft YaHei&quot;;color:maroon;mso-font-kerning:0pt">h</span><span 
                         lang="EN-US" style="font-size:9.5pt;font-family:&quot;Microsoft YaHei&quot;;mso-bidi-font-family:
&quot;Microsoft YaHei&quot;;color:blue;mso-font-kerning:0pt">:</span><span lang="EN-US" style="font-size:9.5pt;font-family:&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;
color:maroon;mso-font-kerning:0pt">treeview</span><span lang="EN-US" style="font-size:9.5pt;font-family:&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;
color:blue;mso-font-kerning:0pt">&gt;</span><span lang="EN-US" style="font-size:
9.5pt;font-family:&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;
mso-font-kerning:0pt"><o:p></o:p></span></p>
             <p align="left" class="MsoNormal">
                   <span lang="EN-US" style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;color:blue;mso-font-kerning:
0pt">&lt;</span><span lang="EN-US" style="font-size:9.5pt;font-family:&quot;Microsoft YaHei&quot;;
mso-bidi-font-family:&quot;Microsoft YaHei&quot;;color:maroon;mso-font-kerning:0pt">script</span><span 
                         lang="EN-US" style="font-size:9.5pt;font-family:&quot;Microsoft YaHei&quot;;mso-bidi-font-family:
&quot;Microsoft YaHei&quot;;mso-font-kerning:0pt"> <span style="color:red">type</span><span 
                         style="color:blue">=&quot;text/javascript&quot;&gt;</span><o:p></o:p></span></p>
             <p align="left" class="MsoNormal">
                   <span lang="EN-US" style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;color:#404040;
mso-font-kerning:0pt">_h</span><span lang="EN-US" style="font-size:9.5pt;
font-family:&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;
mso-font-kerning:0pt">.ready(<span style="color:blue">function</span> () {<o:p></o:p></span></p>
             <p align="left" class="MsoNormal">
                   <span lang="EN-US" 
                         style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;mso-font-kerning:0pt">
                   <span style="mso-spacerun:yes">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
                   <span style="color:#404040">_h</span>.LoadJS(<span style="color:maroon">&quot;../data.min.js&quot;</span>,
                   <span style="color:
blue">false</span>, true); <o:p></o:p></span>
             </p>
             <p align="left" class="MsoNormal">
                   <span lang="EN-US" 
                         style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;mso-font-kerning:0pt">
                   <span style="mso-spacerun:yes">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
                   <span style="color:blue">var</span> listTree = <span style="color:#404040">_g</span>(<span 
                         style="color:maroon">&quot;#listTree&quot;</span>);<o:p></o:p></span></p>
             <p align="left" class="MsoNormal">
                   <span lang="EN-US" 
                         style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;mso-font-kerning:0pt">
                   <span style="mso-spacerun:yes">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>
                   <span style="color:blue">var</span> fram_content = <span style="color:#404040">
                   _g</span>(<span style="color:maroon">&quot;#fram_content&quot;</span>);<o:p></o:p></span></p>
             <p align="left" class="MsoNormal">
                   <span lang="EN-US" 
                         style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;mso-font-kerning:0pt">
                   <span style="mso-spacerun:yes">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</span>listTree.OnItemClickHandle 
                   = <span style="color:blue">function</span> (v) {<o:p></o:p></span></p>
             <p align="left" class="MsoNormal">
                   <span lang="EN-US" 
                         style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;mso-font-kerning:0pt">
                   <span style="mso-spacerun:yes">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   </span>alert(v);<o:p></o:p></span></p>
             <p align="left" class="MsoNormal">
                   <span lang="EN-US" 
                         style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;mso-font-kerning:0pt">
                   <span style="mso-spacerun:yes">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>};<o:p></o:p></span></p>
             <p align="left" class="MsoNormal">
                   <span lang="EN-US" 
                         style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;mso-font-kerning:0pt">
                   <span style="mso-spacerun:yes">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                   listTree.SetData(treeview_data);</span></span></p>
             <p align="left" class="MsoNormal">
                   <span lang="EN-US" 
                         style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;mso-font-kerning:0pt">
                   <span style="mso-spacerun:yes">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                   <span lang="EN-US" 
                         style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;mso-font-kerning:0pt">
                   listTree</span></span>.Expand();<o:p></o:p></span></p>
             <p align="left" class="MsoNormal">
                   <span lang="EN-US" 
                         style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;mso-font-kerning:0pt">
                   });<o:p></o:p></span></p>
             <p align="left" class="MsoNormal">
                   <span lang="EN-US" style="font-size:9.5pt;font-family:
&quot;Microsoft YaHei&quot;;mso-bidi-font-family:&quot;Microsoft YaHei&quot;;color:blue;mso-font-kerning:
0pt">&lt;/</span><span lang="EN-US" style="font-size:9.5pt;font-family:&quot;Microsoft YaHei&quot;;
mso-bidi-font-family:&quot;Microsoft YaHei&quot;;color:maroon;mso-font-kerning:0pt">script</span><span 
                         lang="EN-US" style="font-size:9.5pt;font-family:&quot;Microsoft YaHei&quot;;mso-bidi-font-family:
&quot;Microsoft YaHei&quot;;color:blue;mso-font-kerning:0pt">&gt;<o:p></o:p></span></p>

             </div>
      <script type="text/javascript">
            function run_click() {
                  var btn2 = _g("#btn2");
                  if (btn2.isactive == "false")
                        _h.Btn.Active(btn2, "true");
                  else
                        _h.Btn.Active(btn2, "false");
            }
      </script>
</body>
</html>
